/*
 * @Author: AI Assistant
 * @Date: 2025-10-12 10:00:00
 * @Last Modified by: AI Assistant
 * @Last Modified time: 2025-10-12 10:00:00
 */

import clsx from "clsx";
import { ReactNode, useEffect } from "react";
import styles from "./cutoutModel.module.less";
import cutoutModelStore from "./CutoutModelStore";
import { Close } from "@nutui/icons-react-taro";
import { observer } from "mobx-react-lite";
import utilsStore from "src/utils/utilsStore";
import utils from "src/utils/utils";
import designerStore from "../Designer/designerStore";
import designerRender from "../Designer/designerRender";

// 导入图标
import matting2SVG from "../ImageModel/img/matting2.svg";
import fastenerSVG from "../ImageModel/img/fastener.svg";
import mattingSVG from "../ImageModel/img/matting.svg";

interface Iprops {
    children?: ReactNode
}

// 抠图弹窗组件
const CutoutModel = observer((props: Iprops) => {
    // 检查是否有选中对象
    useEffect(() => {
        if (!Boolean(designerStore.activeObjectId)) {
            cutoutModelStore.setShow(false);
        }
    }, [designerStore.activeObjectId]);

    return (
        <div
            className={clsx(
                styles.cutoutModel,
                cutoutModelStore.show && styles.show
            )}
            style={{
                paddingBottom: utilsStore.safeAreaBottom || utils.rpx2px(20)
            }}
        >
            {[
                {
                    icon: matting2SVG,
                    text: "抠人像",
                    onclick: () => {
                        designerRender.matting();
                    }
                },
                {
                    icon: fastenerSVG,
                    text: "抠头像",
                    onclick: () => {
                        designerRender.fastener();
                    }
                },
                {
                    icon: mattingSVG,
                    text: "通用抠图",
                    onclick: () => {
                        designerRender.normalMatting();
                    }
                }
            ].map((item, index) => (
                <div
                    key={index}
                    className={styles.btns_Item}
                    onClick={item.onclick}
                >
                    <img src={item.icon} alt={item.text} className={styles.icon} />
                    <span className={styles.btns_Item_Text}>{item.text}</span>
                </div>
            ))}

            <Close
                className={styles.close}
                onClick={() => cutoutModelStore.setShow(false)}
            />
        </div>
    );
});

export default CutoutModel;